<template>
	<el-dialog title="权限设置" v-model="visible" append-to-body width="600" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
		<el-tabs tab-position="top">
			<el-tab-pane label="菜单权限">
				<div class="treeMain">
					<el-tree ref="menu" node-key="id" :data="menu.list" :props="menu.props" default-expand-all show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane label="数据权限">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="规则类型">
						<el-select v-model="form.dataScope" placeholder="请选择">
							<el-option
								v-for="item in dataScopeOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="选择部门" v-show="form.dataScope=='2'">
						<div class="treeMain" style="width: 100%;">
							<el-tree ref="dept" node-key="id" :data="data.list" :props="data.props" default-expand-all show-checkbox></el-tree>
						</div>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="控制台模块">
				<div class="treeMain">
					<el-tree ref="grid" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane label="控制台视图">
				<el-form label-width="100px" label-position="left">
					<el-form-item label="控制台视图">
						<el-select v-model="dashboard" placeholder="请选择">
							<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
								<span style="float: left">{{ item.label }}</span>
								<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
							</el-option>
						</el-select>
						<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<template #footer>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
			<el-button @click="visible=false" >取 消</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				visible: false,
				isSaveing: false,
				menu: {
					list: [],
					checked: [],
					props: {
						children: "children",
						label: "label"
					}
				},
				grid: {
					list: [],
					checked: ["welcome", "ver", "time", "progress", "echarts", "about"],
					props: {
						label: (data)=>{
							return data.title
						},
						disabled: (data)=>{
							return data.isFixed
						}
					}
				},
				data: {
					dataType :"1",
					list: [],
					checked: [],
					props: {},
					rule: ""
				},
				form:{

				},
				dashboard: "0",
				dashboardOptions: [
					{
						value: '0',
						label: '数据统计',
						views: 'stats'

					},
					{
						value: '1',
						label: '工作台',
						views: 'work'
					},
				],
				// 数据范围选项
				dataScopeOptions: [
					{
						value: "1",
						label: "全部数据权限"
					},
					{
						value: "2",
						label: "自定数据权限"
					},
					{
						value: "3",
						label: "本部门数据权限"
					},
					{
						value: "4",
						label: "本部门及以下数据权限"
					},
					{
						value: "5",
						label: "仅本人数据权限"
					}
				],
			}
		},
		mounted() {
			this.getMenuTreeSelect()
			this.getDept()
			this.getGrid()
		},
		methods: {
			async open(id) {
				this.form.roleId =id;
				await this.getRoleByRoleId(id)
				await this.getDeptByRoleId(id);
				this.visible = true;
			},
			async submit() {
				this.isSaveing = true;
				// 菜单权限
				var checkedKeys = this.$refs.menu.getCheckedKeys().concat(this.$refs.menu.getHalfCheckedKeys())
				// 部门权限
				var checkedKeys_dept = this.$refs.dept.getCheckedKeys().concat(this.$refs.dept.getHalfCheckedKeys())
				this.form.menuIds = checkedKeys;
				this.form.deptIds = checkedKeys_dept;
				let res = await this.$API.system.role.updateRole.put(this.form);
				if (res.code ==200){
					this.$message.success("操作成功")
					this.$emit('success')
				}else {
					this.$alert(res.msg, "提示", {type: 'error'})
				}
				this.isSaveing = false;
				this.visible = false;
			},
			// 查询菜单树结构
			async getMenuTreeSelect() {
				let res = await this.$API.system.menu.treeselect.get(null)
				if (res.code == 200){
					this.menu.list = res.data;
				}
			},
			// 获取部门树结构
			async getDept(){
				var res = await this.$API.system.dept.tree.get();
				if (res.code == 200){
					this.data.list = res.data
				}
			},
			// 所有菜单节点数据
			getMenuAllCheckedKeys() {
				// 目前被选中的菜单节点
				let checkedKeys = this.$refs.menu.getCheckedKeys();
				// 半选中的菜单节点
				let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
				checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
				return checkedKeys;
			},
			// 根据权限ID获取权限
			async getRoleByRoleId(id) {
				// 根据角色获取权限绑定
				setTimeout(async () => {
					let res = await this.$API.system.menu.roleMenuTreeselect.get(id)
					if (res.code == 200) {
						let checkedKeys = res.checkedKeys
						checkedKeys.forEach((v) => {
							this.$nextTick(() => {
								 this.$refs.menu.setChecked(v, true, false);
							})
						})
					}
				},1)
			},
			async getDeptByRoleId(id) {
				// 绑定dataScope
				let role = await this.$API.system.role.getRole.get(id)
				if (role.code == 200) {
					this.form.dataScope = role.data.dataScope;
					if (role.data.dataScope == "2"){
						// 根据角色获取权限绑定
						setTimeout(async () => {
							let res = await this.$API.system.dept.roleDeptTree.get(id)
							if (res.code == 200) {
								let checkedKeys = res.checkedKeys
								checkedKeys.forEach((v) => {
									this.$nextTick(() => {
										this.$refs.dept.setChecked(v, true, false);
									})
								})
							}
						}, 1)
					}
				}

			},
			getGrid(){
				this.grid.list = [
					{
						key: "welcome",
						title: "欢迎",
						isFixed: true
					},
					{
						key: "ver",
						title: "版本信息",
						isFixed: true
					},
					{
						key: "time",
						title: "时钟"
					},
					{
						key: "progress",
						title: "进度环"
					},
					{
						key: "echarts",
						title: "实时收入"
					},
					{
						key: "about",
						title: "关于项目"
					}
				]
			}
		}
	}
</script>

<style scoped>
	.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
</style>
